<template>
    <view class="wrap savepadding">
        <!-- 加载中 -->
        <u-tabbar v-if="loading"
                  activeColor="#12B9A3"
                  inactiveColor="#B6B6B6"
                  :fixed="true"
                  :placeholder="true"
                  :safeAreaInsetBottom="true">
            <u-tabbar-item text="loading...">
                <u-loading-icon slot="active-icon"></u-loading-icon>
                <u-loading-icon slot="inactive-icon"></u-loading-icon>
            </u-tabbar-item>
        </u-tabbar>
        <!-- 加载完成 -->
        <u-tabbar v-else
                  activeColor="#12B9A3"
                  :key="orderConfValue"
                  inactiveColor="#B6B6B6"
                  :value="tab"
                  :fixed="true"
                  :placeholder="true"
                  :safeAreaInsetBottom="true">
            <template v-for="(item,index) in tabs">
                <u-tabbar-item :text="item.text"
                               :key="index"
                               @click="onClick(item.link)">
                    <image style="width:39upx;height:37upx"
                           slot="active-icon"
                           :src="item.activeIcon"></image>
                    <image style="width:39upx;height:37upx"
                           slot="inactive-icon"
                           :src="item.inactiveIcon"></image>
                </u-tabbar-item>
            </template>
        </u-tabbar>
    </view>
</template>

<script>
export default {
    props: {
        tab: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            loading: true,
            orderConfValue: 0,
            list: [
                {
                    text: '工作台',
                    link: '/pages/index/index',
                    activeIcon: '/static/tabBar/tabBar_home_selected.png',
                    inactiveIcon: '/static/tabBar/tabBar_home_default.png',
                },
                {
                    text: '我的',
                    link: '/pages/mine/mine',
                    activeIcon: '/static/tabBar/tabBar_mine_selected.png',
                    inactiveIcon: '/static/tabBar/tabBar_mine_default.png',
                },
            ],
        };
    },
    computed: {
        tabs() {
            if (this.loading) {
                return [];
            }
            return this.list;
        },
    },
    async mounted() {
        this.loading = false;
    },
    methods: {
        onClick(url) {
            uni.switchTab({ url });
        }
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    position: relative;
    z-index: 100;
}
</style>
